@import '../../mixins'

.CtxMenu
  box(absolute)
  size(100%, 1px, max-h: 100%)
  pos(0, 0)
  z-index: -1
  opacity: 0
  transition: opacity var(--d-fast), z-index var(--d-fast)
  &[data-active]
    opacity: 1
    z-index: 5000

.CtxMenu .container
  box(absolute)
  pos(0, b: 0)
  size(100%, 0px)

.CtxMenu .box
  box(absolute)
  size(max-w: calc(100% - 28px), min-w: 160px)
  z-index: 30
  padding: 0 0 0 0
  margin: 0
  overflow: hidden
  border-radius: 3px
  background-color: var(--ctx-menu-bg)
  box-shadow: var(--ctx-menu-shadow)

.CtxMenu .inline-group
  box(relative, flex)
  size(max-w: 200px)
  overflow: hidden
  flex-wrap: wrap
  &:not(:last-of-type)
    padding: 0 0 1px
    box-shadow: inset 0 -1px 0 0 var(--ctx-menu-border-fg)

.CtxMenu .icon-opt
  box(relative)
  size(auto, 30px, min-w: 30px)
  flex-grow: 1
  flex-shrink: 0
  &[data-width="3"]
    size(33.3%)
    flex-grow: 0
  &[data-width="4"]
    size(25%)
    flex-grow: 0
  &[data-width="wrap"]
    size(20%)
    flex-grow: 0
  &:hover
  &[data-selected]
    background-color: var(--ctx-menu-bg-hover)
    img
    svg
      opacity: 1
    .badge
      background-color: var(--ctx-menu-bg-hover)
  &:active
    opacity: .7
  img
  svg
    box(absolute)
    size(16px, same)
    pos(calc(50% - 8px), calc(50% - 8px))
    opacity: .8
    fill: var(--container-fg, var(--ctx-menu-fg))
  .badge
    pos(calc(50% + 2px), calc(50% - 10px))
    size(9px, same)
    opacity: 1
    background-color: var(--ctx-menu-bg)
    border-radius: 1px
    &[data-img="true"]
      fill: var(--ctx-menu-fg)
  &[data-separator]
    size(0px, min-w: 0px, max-w: 0px)
    &:before
      content: ''
      box(absolute)
      pos(0, 0)
      size(1px, 100%)
      background-color: var(--ctx-menu-border-fg)
  &[data-inactive]
    opacity: .3
    background-color: #00000000

.CtxMenu .list-group
  box(relative)
  size(max-w: 200px)
  &:not(:last-of-type)
    padding: 0 0 1px
    box-shadow: inset 0 -1px 0 0 var(--ctx-menu-border-fg)

.CtxMenu .opt
  box(relative, flex)
  font: var(--ctx-menu-font)
  align-items: center
  justify-content: flex-start
  padding: 2px 0 2px 8px
  color: var(--ctx-menu-fg)
  white-space: pre
  > span
    box(relative)
    overflow: hidden
    color: var(--container-fg, var(--ctx-menu-fg))
    flex-shrink: 0
    &:last-of-type
      size(100%)
      mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)
      flex-shrink: 1
  &:before
    content: ''
    box(absolute)
    size(100%, same)
    pos(0, 0)
  &:first-of-type
    padding-top: 4px
  &:last-of-type
    padding-bottom: 4px
  &:hover:before
  &[data-selected]
    background-color: var(--ctx-menu-bg-hover)
  &:active
    opacity: .7
  &[data-separator]
    padding: 2px 0
  &[data-separator]:before
    content: ''
    box(relative)
    size(100%, 1px)
    background-color: var(--ctx-menu-border-fg)
  &[data-inactive]
    opacity: .4
    &:hover:before
    &[data-selected]
      background-color: #00000000
#root[data-style="light"] .CtxMenu .opt > span[data-color]
  size(auto)
  padding: 0 2px
  margin-right: 2px
  border-radius: 2px
  flex-shrink: 1
  text-overflow: ellipsis
  color: var(--ctx-menu-fg) !important
  mask: none
  box-shadow: 0 0 0 1px var(--container-fg)
  &:before
    content: ''
    box(absolute)
    size(100%, same)
    pos(0, 0)
    background-color: var(--container-fg)
    border-radius: 2px
    z-index: -1
    opacity: .3

// ---
// -- Transitions
// -
.menu-enter-active
.menu-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast)
.menu-enter
  z-index: -1
  opacity: 0
  transform: translateX(16px)
.menu-enter-to
  z-index: 100
  opacity: 1
  transform: translateX(0)
.menu-leave
  z-index: 100
  opacity: 1
  transform: translateX(0)
.menu-leave-to
  z-index: -1
  opacity: 0
  transform: translateX(16px)